<template>
	<div>
		<div class="mui-numbox" data-numbox-min="1"  :data-numbox-max="10">
			<button class="mui-btn mui-btn-numbox-minus" type="button" >-</button>
			<input id="test" class="mui-input-numbox" type="number" value=1 @change="change" ref="num">
			<button class="mui-btn mui-btn-numbox-plus" type="button" >+</button>
		</div>
	</div>
</template>

<script>
	
	import mui from "../../lib/mui/js/mui.js"

	export default {
		data:function () {
			return {
				num:1,
			}
		},
		//1.第一种 设置数量上限的方案  使用计算属性监听数据改变  等待真实数据过来

		//                （前提是 计算属性中的数据必须使用到页面中 不然计算函数不会运行！！！！）
		// computed:{
		// 	lisentNum:function  () {
		// 		var number = 5
		// 		if(this.max){
		// 			console.log(this.max)
		// 			mui(".mui-numbox").numbox().setOption("max",this.max);
		// 		}
		// 		return number
		// 	}
		// },

		//2.第二种 设置数据上限的方式  使用监听属性 监听数据
		watch:{
			"max":function  (newValue,oldValue) {
				if(newValue){
					// console.log(newValue)
					mui(".mui-numbox").numbox().setOption("max",newValue);
				}
			}
		},
		methods:{
			change(){
				this.num = this.$refs.num.value
				if(parseInt(this.num)>parseInt(this.max)){
					this.num = parseInt(this.max);
				}
				if(this.nue<1){
					this.num = 1;
				}
				this.$emit("addProduct",this.num)
			}
		},
		props:["max"],
		mounted(){
			mui(".mui-numbox").numbox();
		},
	}
</script>

<style lang="scss" scoped>

</style>